<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { getNews, getNewsDetail, getNewsViewVolumeDetail } from '~/service/news'

const { locale } = useLocale()

const language = ref(locale.value === 'zh' ? 'zh' : 'en')

const { width } = useWindowSize()
const windowWidth = ref(width.value)
watch(width, (newWidth) => {
  windowWidth.value = newWidth
})

const { changeMode } = useHeader('transparent')
const { y } = useWindowScroll()

watch(y, (newY) => {
  changeMode(newY > 90 ? 'light' : 'transparent')
})

definePageMeta({
  title: '新闻详情',
})

const route = useRoute()
const router = useRouter()
const id = ref('')

// 上一条数据的id
const prevId = ref('')
// 上一条数据的名字
const prevName = ref('')
// 下一条数据的名字
const nextName = ref('')
// 下一条数据的id
const nextId = ref('')
// 推荐阅读
const recommendList = ref([])

// 获取案例详情
async function getNewsList() {
  await getNews().then((res: any) => {
    const index = res.list.findIndex((item: any) => `${item.id}` === id.value)
    // 推荐阅读
    recommendList.value = res.list?.filter?.((news: any) => news.isRecommend === '1')
    // 筛选新闻类型
    const industryNews = res.list?.filter?.((news: any) => news.type === '2') || []
    const index1 = industryNews.findIndex((item: any) => `${item.id}` === id.value) || []
    const companyNews = res.list?.filter?.((news: any) => news.type === '1') || []
    const index2 = companyNews.findIndex((item: any) => `${item.id}` === id.value) || []
    // 当前新闻的新闻类型
    const currentNewsType = res.list[index]?.type

    // 同类型新闻中的上一条数据的id
    if (currentNewsType === '1')
      prevId.value = index2 === 0 ? '' : companyNews[index2 - 1]?.id

    else
      prevId.value = index1 === 0 ? '' : industryNews[index1 - 1]?.id

    // 同类型新闻中的下一条数据的id
    if (currentNewsType === '1')
      nextId.value = index2 === companyNews.length - 1 ? '' : companyNews[index2 + 1].id

    else
      nextId.value = index1 === industryNews.length - 1 ? '' : industryNews[index1 + 1].id

    if (nextId.value) {
      const name1 = res.list.find((item: any) => item.id === nextId.value)
      nextName.value = language.value === 'zh' ? name1.title : name1.title_en
    }
    else if (prevId.value) {
      const name2 = res.list.find((item: any) => item.id === prevId.value)
      prevName.value = language.value === 'zh' ? name2.title : name2.title_en
    }
  })
}

// 新闻详情
const newsDetail = ref<any>({
  title: '',
  type: '',
  source: '',
  publish_date: '',
  content: '',
})
// 获取新闻详情
async function getNewsDetailData(id: any) {
  await getNewsDetail(id).then((res: any) => {
    newsDetail.value = res
  })
}
// 新闻浏览量
const newsViewVolumeDetail = ref({})
// 获取新闻浏览量
async function getNewsViewVolumeDetailData(id: any) {
  await getNewsViewVolumeDetail(id).then((res) => {
    newsViewVolumeDetail.value = res
  })
}
onMounted(async () => {
  id.value = route.query.id
  await getNewsList()
  //   await getNewsDetailData({ id: id.value })
  await getNewsViewVolumeDetailData({ id: id.value })
//   useHead({
//     title: `${newsDetail.value.title}-超益钢业`,
//   })
})

const { data: detailData } = await useAsyncData(async () => await getNewsDetail({ id: route.query.id }))
newsDetail.value = detailData.value

useHead({
  title: `${newsDetail.value?.title}-超益钢业`,
})

// 新闻类型
// const newsType = {
//   1: language.value === 'zh' ? '公司新闻' : 'Company News',
//   2: language.value === 'zh' ? '行业新闻' : 'Industry News',
// }

// 跳转详情页
function toDetail(id: any) {
  router.push({
    path: '/news/news',
    query: {
      id,
    },
  })
  setTimeout(() => {
    window.location.reload()
  })
}
// async function toDetail(i: any) {
// //   id.value = i
// //   await getNewsDetailData({ id: id.value })
// //   await getNewsViewVolumeDetailData({ id: id.value })
// //   prevId.value = ''
// //   nextId.value = ''
// //   await getNewsList()
// }
</script>

<template>
  <div>
    <div h="[400px]" class="flex flex-col items-center justify-center bg-[url(~/assets/img/img_news_banner.png)]">
      <h1 class="text-[46px] text-[#fff]">
        {{ $t('menu.news') }}
      </h1>
      <h2 text="uppercase [#ffffff33] [42px]">
        NEWS
      </h2>
    </div>
    <section relative v-bind="$attrs">
      <div mt="[5px]" text="[18px]">
        <Breadcrumbs :items="[{ name: $t('menu.news'), path: '/news' }, { name: get(newsDetail, 'title', locale), path: '/news/1' }]" style="cursor: pointer;" />
        <h1 class="title">
          <div v-html="get(newsDetail, 'title', locale)"></div>
        </h1>
        <div v-if="windowWidth > 828" class="content">
          <span class="tag" ml="50px" mr="[50px]">
            {{ language === 'zh' ? '来源' : 'Dource' }}<span>:</span> {{ get(newsDetail, 'source', locale) }}
          </span>
          <span class="tag" ml="[50px]" mr="[50px]">
            {{ language === 'zh' ? '时间' : 'Date' }}<span>:</span> {{ newsDetail.publish_date }}
          </span>
          <span class="tag" ml="[50px]" mr="[50px]">
            {{ language === 'zh' ? '浏览量' : 'Page view' }}<span>:</span> {{ newsViewVolumeDetail.viewVolume }}
          </span>
        </div>
        <div v-else class="content" grid="~ cols-3 gap-x-[10px] gap-y-[32px]">
          <span class="tag">
            {{ language === 'zh' ? '来源' : 'Dource' }}<span>:</span> {{ get(newsDetail, 'source', locale) }}
          </span>
          <span class="tag">
            {{ language === 'zh' ? '时间' : 'Date' }}<span>:</span> {{ newsDetail.publish_date }}
          </span>
          <span class="tag">
            {{ language === 'zh' ? '浏览量' : 'Page view' }}<span>:</span> {{ newsViewVolumeDetail.viewVolume }}
          </span>
        </div>
        <div :style="{ margin: windowWidth > 828 ? '0 25%' : '0 20px' }">
          <el-divider />
        </div>
        <div class="content" :style="{ margin: windowWidth > 828 ? '0 25%' : '0 20px' }" v-html="replaceImgUrl(get(newsDetail, 'content', locale))">
        </div>
        <div style="display: flex; justify-content: center;">
          <div class="back" @click="router.push('/news')">
            <img src="~/assets/img/arrow-go-back-line.png" class="h-[24px] w-[24px]" mb="[5px]">
            <span>
              {{ language === 'zh' ? '返回列表' : 'Back' }}
            </span>
          </div>
        </div>
      </div>
      <div class="footer">
        <span v-if="prevId" style="cursor: pointer;" @click="toDetail(prevId)">{{ language === 'zh' ? '上一篇' : 'previous' }}: {{ prevName }}</span>
        <span v-if="nextId" style="cursor: pointer;" @click="toDetail(nextId)">{{ language === 'zh' ? '下一篇' : 'next' }}: {{ nextName }}</span>
      </div>
      <div :style="{ margin: windowWidth > 828 ? '0 25%' : '0 20px' }">
        <div>
          <h2>{{ language === 'zh' ? '推荐阅读' : 'Recommended Reading' }}</h2>
        </div>
        <div v-if="windowWidth > 828" m="t-[32px]" grid="~ cols-3 gap-x-[48px] gap-y-[32px]" class="mb-[100px]">
          <div v-for="news in recommendList" :key="news.id" border="b-[1px] solid [#f1f1f1]" p="b-[24px]" text="[16px]" class="point" @click="toDetail(news.id)">
            <div>
              <div>
                <h5 text="[18px]">
                  {{ get(news, 'title', locale) }}
                </h5>
              </div>
            </div>
          </div>
        </div>
        <div v-else m="t-[32px]" grid="~ cols-1 gap-x-[48px] gap-y-[32px]" class="mb-[100px]">
          <div v-for="news in recommendList" :key="news.id" border="b-[1px] solid [#f1f1f1]" p="b-[24px]" text="[16px]" class="point" @click="toDetail(news.id)">
            <div>
              <div>
                <h5 text="[18px]">
                  {{ get(news, 'title', locale) }}
                </h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.title {
  font-size: 34px;
  text-align: center;
}
.content {
  font-size: 18px;
  line-height: 1.8;
  margin-top: 20px;
  text-align: center;
}
.tag {
  display: inline-block;
}
.back {
  height: 92px;
  width: 92px;
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 106px 106px 106px 106px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666666ff;
  font-size: 14px;
  margin-top: 60px;
}
.footer {
  display: flex;
  justify-content: space-evenly;
  margin-top: 60px;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  padding: 0 94px;
  color: #666666ff;
}
.point {
  cursor: pointer;
}
</style>
